<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/02-reset.css">
    <link rel="stylesheet" href="css/mycat.css">
    <link rel="stylesheet" href="css/clearBoth.css">
    <link rel="stylesheet" href="./css/home.css">
    <style>
        .box1 {
            width: 100%;
            height: 50px;
            background-color: #e9ccd3;
            box-sizing: border-box;
            min-width: 1200px;
        }

        .box1 ul {
            width: 1000px;
            height: 50px;
            float: right;

        }

        .box1 ul li {
            float: left;
        }

        .box1 ul li a {
            display: inline-block;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
            width: 200px;
            height: 50px;
        }

        .box1 p {
            float: left;
            font-size: 20px;
            line-height: 50px;
            margin-left: 100px;
            min-width: 100px;
        }

        .box1 ul li a:hover {
            background-color: #b598a1;
        }

        tr {
            display: block;
            border-bottom: 1px solid #000;
            margin-left: 30px;
        }
        th{
            float: left;
            margin-left: 20px;
        }
        tr img {
            margin-left: 20px;
            width: 80px;
            height: 80px;
        }

        [name="number"] {
            width: 50px;
        }

        .cart{
            width: 100%;
            border: 1px solid;
        }
        .zss {
            padding: 10px;
            overflow: hidden;
            height: 75px;
            background: #111b24;
            font-size: 12px;
            color: #9699a8;
            line-height: 24px;
            text-align: center;
            width: 98.5%;
        }
    </style>
</head>

<body>
    <div class="box1">
        <a href="./index.html">
            <p>京东</p>
        </a>
        <ul>
            <li><a href="./login.html" class="login">登录</a></li>
            <li><a href="./resgiter.html" class="logup">注册</a></li>
            <li><a href="./mycat.html">我的订单</a></li>
            <li><a href="./list.html">商品列表</a></li>
            <li><a href="./my.html">个人中心</a></li>
        </ul>
    </div>
    <div class="carSearch">
        <div class="carSearch_c">
            <div class="carSearch_logo">

            </div>
            <div class="searchput">
                <div class="searchput_left">
                    <input type="text">
                </div>
                <div class="searchput_right">
                    <input type="button" value="搜索">
                </div>
            </div>
        </div>
    </div>
    <!-- 列表导航 -->
    <div class="list_nav">
        <div class="list_nav_c">
            <ul>
                <li><a href="home.html">首页</a></li>
                <li>&gt;</li>
                <li><a href="list.html">列表</a></li>
                <li>&gt;</li>
                <li><a>当前</a></li>
            </ul>
        </div>
    </div>
    <!-- 购物车主体 -->
    <div class="content">
        <div class="content_c">
            <div class="content_top">
                <div class="content_top_left">
                    <b>全部商品</b>
                    <span>5</span>
                </div>
                <div class="content_top_right">
                    <div>
                        <b>配送至</b>
                    </div>
                    <div>
                        <span>请选择地址</span>
                        <svg class="icon arrorw" aria-hidden="true">
                            <use xlink:href="#icon-dingbu"></use>
                        </svg>
                    </div>
                </div>
            </div>
            <!-- 购物车头部 -->
            <div class="car_head">
                <div class="car_head_check">
                    <input type="checkbox" class="checkAll">
                    <span>全选</span>
                </div>
                <div class="car_head_goods">商品</div>
                <div class="car_head_price">单价</div>
                <div class="car_head_num">数量</div>
                <div class="car_head_sum">小计</div>
                <div class="car_head_operate">操作</div>
            </div>
            <div class="car_body_list${i}">
                <div class="car_body">
                    <div class="car_body_row1">
                        <div>

                        </div>
                        <div>
                            <a href="javaScript:;">京东自营店</a>
                            <b><a></a></b>
                        </div>
                        <div>
                            <b></b>
                        </div>
                    </div>
                    <div class="car_body_row2">
                        <div>
                            <span class="mj">满减</span>
                            <span>已满5件，已减0.00元</span>
                            <a href="list.html">去凑单></a>
                        </div>
                        <div>
                            <p>¥<span>50</span></p>
                            <p class="jian">减：-¥<span>0.00</span></p>
                        </div>
                    </div>
                    <div class="cart">
                    <table>
                        <thead>
                            <tr>
                                <th><input type="checkbox" name="selectAll" style="margin-left: 0;">全选</th>
                                <th>商品图片</th>
                                <th class="title" width="100">商品名称</th>
                                <th>商品单价</th>
                                <th>商品数量</th>
                                <th>商品小计</th>
                                <th>商品操作</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                        <tfoot>
                            <tr>
                                <td><input type="checkbox" name="selectAll">全选</td>
                                <td class="removeSelected">删除选中的商品</td>
                                <td class="clear">清空购物车</td>
                                <td>总价：￥<span class="totalPrice">000</span></td>
                                <td>总数量：<span class="totalNum">15</span></td>
                                <td></td>
                                <td><button class="bbaa">结算</button></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
            <div class="car_foot_right">
                <div><a href="javaScript:;" class="bbaa">去结算</a></div>
            </div>
        </div>
    </div>
    </div>
    <!-- 底部 -->
    <div class="footer clear">
        <div class="footer_c">
            <div class="footer1 clear">
                <ul>
                    <li>
                        <p>
                            <b class="footer1_pc1"></b>
                            <span>品类齐全，轻松购物</span>
                        </p>
                    </li>
                    <li>
                        <p>
                            <b class="footer1_pc2"></b></b>
                            <span>多仓直发，极速配送</span>
                        </p>
                    </li>
                    <li>
                        <p>
                            <b class="footer1_pc3"></b></b>
                            <span>正品行货，精致服务</span>
                        </p>
                    </li>
                    <li>
                        <p>
                            <b class="footer1_pc4"></b></b>
                            <span>天天低价，长轩无忧</span>
                        </p>
                    </li>
                </ul>
            </div>
            <div class="footer2 clear">
                <ul>
                    <li><b>购物指南</b></li>
                    <li><a href="#">购物流程</a></li>
                    <li><a href="#">会员介绍</a></li>
                    <li><a href="#">生活旅行</a></li>
                    <li><a href="#">常见问题</a></li>
                    <li><a href="#">大家电</a></li>
                    <li><a href="#">联系客服</a></li>
                </ul>
                <ul>
                    <li><b>配送方式</b></li>
                    <li><a href="#">上门自提</a></li>
                    <li><a href="#">211限时达</a></li>
                    <li><a href="#">配送服务查询</a></li>
                    <li><a href="#">配送费收取标准</a></li>
                    <li><a href="#">海外配送</a></li>
                </ul>
                <ul>
                    <li><b>支付方式</b></li>
                    <li><a href="#">货到付款</a></li>
                    <li><a href="#">在线支付</a></li>
                    <li><a href="#">分期付款</a></li>
                    <li><a href="#">公司转账</a></li>
                </ul>
                <ul>
                    <li><b>售后服务</b></li>
                    <li><a href="#">售后政策</a></li>
                    <li><a href="#">价格保护</a></li>
                    <li><a href="#">退款说明</a></li>
                    <li><a href="#">返修/退换货</a></li>
                    <li><a href="#">取消订单</a></li>
                </ul>
                <ul>
                    <li><b>特殊服务</b></li>
                    <li><a href="#">夺宝岛</a></li>
                    <li><a href="#">DIY装机</a></li>
                    <li><a href="#">延保服务</a></li>
                    <li><a href="#">东京E卡</a></li>
                    <li><a href="#">京东通信</a></li>
                    <li><a href="#">京鱼座智能</a></li>
                </ul>
                <ul>
                    <li><b>京东自营覆盖区县</b></li>
                    <p><a href="#">京东已向全国2661个区县提供自营配送服务，支持货到付款POS机刷卡和售后上门服务</a></p>
                    <li class="seeMore"><a href="#">查看详情</a></li>

                </ul>
            </div>
            <div class="footer3 clear">
                <ul class="clear">
                    <li><a href="#">关于我们</a></li>
                    <li>|</li>
                    <li><a href="#">联系我们</a></li>
                    <li>|</li>
                    <li><a href="#">联系客服</a></li>
                    <li>|</li>
                    <li><a href="#">合作招商</a></li>
                    <li>|</li>
                    <li><a href="#">商家帮助</a></li>
                    <li>|</li>
                    <li><a href="#">营销中心</a></li>
                    <li>|</li>
                    <li><a href="#">手机京东</a></li>
                    <li>|</li>
                    <li><a href="#">友情链接</a></li>
                    <li>|</li>
                    <li><a href="#">销售联盟</a></li>
                    <li>|</li>
                    <li><a href="#">京东社区</a></li>
                    <li>|</li>
                    <li><a href="#">风险监测</a></li>
                    <li>|</li>
                    <li><a href="#">隐私政策</a></li>
                    <li>|</li>
                    <li><a href="#">京东公益</a></li>
                    <li>|</li>
                    <li><a href="#">English Site</a></li>
                    <li>|</li>
                    <li><a href="#">Media & IR</a></li>
                </ul>
                <p><a href="">
                        京公网安备1000000088号</a><span>|</span><a>0京ICP备11041704号</a><span>|</span><a>互联网药品信息服务
                        资格证编号(京)经营性-2014-00081</a><span>|</span><a>新出发京零 字第大120007号</a>
                </p>
                <p>
                    <a href="">
                        <a>互联网出版许可证编号新出网证(京)字150号</a><span>|</span><a>出版物经营许可证</a><span>|</span><a>网络文化经营许可证京网文[2020]6112-1201号</a><span>|</span><a>违法和不良信息举报电话:
                            4006561155</a>
                    </a>
                </p>
                <p>
                    <a href="">Global Site</a><span>|</span><a href="">Сайт России</a><span>|</span><a href="">Sitio de
                        España</a><span>|</span><a href="">เว็บไซต์ประเทศไทย</a>
                </p>
                <p>
                    <a href="">京东旗下网站:</a><a href="">京东钱包</a><span>|</span><a href="">京东云</a><span>|</span><a
                        href=""></a>网络从业人员违法违规行为举报电话: 4006561 155-3
                </p>
                <ul class="clear ul5">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="zss">
        <p>周帅帅集团能力有限公司</p>
        <p>周帅帅著</p>
        <p>京ICP备12003911号-6 &nbsp Copyright &copy2013-2019</p>
    </div>
</body>
<script src="js/utils.js"></script>
<script src="js/jquery-3.6.0.js"></script>
<script src="js/cat.js"></script>
<script src="./js/layer/dist/layer.js"></script>

<script>
    var username = getCookie('username')
    if (username) {
        var loginLi = document.querySelector('.login')
        var mtbott = document.querySelector('.mright .mttop .mtbott')
        loginLi.innerHTML = `
       <li><a href ="./my.html">欢迎用户${username}</a></li>
       `
        var logup = document.querySelector('.logup')
        logup.innerHTML = `
       <a href = "javascript:;" class="logout">登出</a>
       `

        //登出
        document.querySelector('.logout').onclick = function () {
            loginLi.innerHTML = `
        <li><a href="./login.html" class="login">登录</a></li>
       `
            mtbott.innerHTML = `
            <span style="margin-right: 10px;">登录</span>
                    <span>|</span>
                    <span style="margin-left: 10px;">注册</span>
       `
            //删除cookie
            removeCookie('username')
        }
    }
</script>

</html>